<!--
 * @Author: C.
 * @Date: 2023-12-05 10:00:02
-->
<template>
  <view class="chart-wrapper">
    <view class="chart-header">
      <view class="chart-header-title">
        <!-- <span v-if="title">{{ title }}</span> -->
        <t-title
          v-if="title"
          :title="title"
          mode="vLine"
          assist-color="#422fcc"
        />
      </view>
      <view class="chart-header-extra">
        <slot name="extra" />
        <view v-if="enumMap || mode" class="extra-select" @click="openSelect">
          <span class="extra-select-desc">{{ displayText }}</span>
          <t-icon name="down" :class="openPicker ? 'm-turn-over' : ''"
        /></view>
      </view>
    </view>
    <view>
      <slot />
    </view>
    <!-- 枚举选择器 -->
    <t-picker
      v-if="enumMap"
      v-model="pickerValue"
      v-model:open="openPicker"
      :data="pickerData"
      :mask="true"
      style="z-index: 20091"
      @confirm="selectConfirm"
    />
    <t-popup
      v-if="mode"
      v-model="openPicker"
      open-direction="bottom"
      style="z-index: 20091"
      height="540rpx"
    >
      <DateRange @confirm="rangeConfirm" />
    </t-popup>
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { onMounted, ref } from 'vue'

// ----------------------------- hooks -----------------------------
// ----------------------------- 组件 -----------------------------
import DateRange from '@/components/date-range'
// ----------------------------- 其他引入 -----------------------------
const props = defineProps({
  title: {
    type: String,
  },
  enumMap: {
    type: Object,
  },
  mode: {
    type: String,
  },
})

const emits = defineEmits(['change', 'dateChange'])
//----------------------------- 变量声明区 -----------------------------
const openPicker = ref(false)

const pickerData = ref<any[]>([])
const displayText = ref<string>('默认')
const pickerValue = ref(undefined)
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------
onMounted(() => {
  if (props.enumMap) {
    pickerData.value = props.enumMap.getEnums(true)
    displayText.value = props.enumMap.getDefaultValue('label')
  }
})
//  ----------------------------- 自定义方法区 -----------------------------
function openSelect() {
  openPicker.value = true
}
function selectConfirm(val: any, item: any) {
  if (props.enumMap) {
    displayText.value = props.enumMap.getLabel(val)
  }
  emits('change', val, item)
}
function rangeConfirm(rangeDate: any) {
  // console.log(rangeDate, 'rangeDate')
  if (rangeDate.tag) {
    displayText.value = rangeDate.tag
  } else {
    displayText.value = `${rangeDate.start}~${rangeDate.end}`
  }
  openPicker.value = false
  emits('dateChange', rangeDate)
}
</script>
<style lang="scss" scoped>
.chart-wrapper {
  padding: 20rpx;
  /* margin-bottom: 20rpx; */
  background-color: #fff;
  border-bottom: 20rpx solid #f3f3f3;
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    &-title {
      font-weight: bold;
      font-size: 30rpx;
    }
    .chart-header-extra {
      .extra-select {
        background-color: #f3f3f3;
        color: #8a8a8a;
        padding: 10rpx 20rpx;
        border-radius: 5rpxrpx;

        &-desc {
          font-size: 25rpx;
          padding-right: 15rpx;
        }
      }
    }
  }
}
</style>
